//空构造函数  
function Carousel() {
    // 获取标签，作为对象c的属性
    this.container = document.querySelector('.Carousel');
    this.ul = document.querySelector('.Carousel ul');
    this.ol = document.querySelector('.Carousel ol');
    this.leftBtn = document.querySelector('.Carousel>a.leftBtn');
    this.rightBtn = document.querySelector('.Carousel>a.rightBtn');
    this.firstLi = this.ul.children[0]
    this.index = 1
    this.flag = true
    this.timer = null
}
// 将事件放在一个方法中
Carousel.prototype.init = function() {
    // 避免回流 - 先让大盒子隐藏
    // this.container.style.display = 'none'
    var ol = this.ol.cloneNode(true)
    // 先根据ul中li的数量创建ol中的li
    for(var i=0; i<this.ul.children.length; i++) {
       ol.appendChild(document.createElement('li'))
    }
    ol.children[0].style.backgroundColor = 'red'
    // ol.style.borderRadius = 20/2 + 'px'
    // ol回流了一次
    this.ol.parentElement.replaceChild(ol, this.ol)
    this.ol = ol
    ol.style.borderRadius = ol.offsetHeight/2 + 'px'
    // 复制图片
    var ul = this.ul.cloneNode(true)
    var lastLi = this.ul.children[this.ul.children.length-1].cloneNode(true)
    ul.insertBefore(lastLi, ul.children[0])
    ul.appendChild(this.firstLi.cloneNode(true))
    // 设置ul的样式
    setStyle(ul, {
        width: this.firstLi.offsetWidth * ul.children.length + 'px',
        left: -this.firstLi.offsetWidth + 'px'
    })
    // 使用ul变量替换掉原来的ul
    this.ul.parentElement.replaceChild(ul, this.ul)
    this.ul = ul
    this.firstLi = this.ul.children[0]
    // 因为让大盒子隐藏了，复制出来的标签没有在页面中显示，所以获取不到宽度
    // console.log(this.firstLi.offsetWidth);
    // 所有需要回流的操作完成了， 将大盒子显示
    // this.container.style.display = 'block'
    // 右箭头点击
    this.rightBtn.onclick = () => {
        if(!this.flag) return false
        this.flag = false
        this.index++
        animate(this.ul, {
            left: -this.index * this.firstLi.offsetWidth
        }, () => {
            // console.log(this);
            if(this.index === this.ul.children.length - 1) {
                this.index = 1
                this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
            }
            // 小圆点
            for(var i=0; i<this.ol.children.length; i++) {
                this.ol.children[i].style.backgroundColor = '#000'
            }
            this.ol.children[this.index-1].style.backgroundColor = 'red'
            this.flag = true
        })
        return false
    }

    // 左箭头点击
    this.leftBtn.onclick = () => {
        if(!this.flag) return false
        this.flag = false
        this.index--
        animate(this.ul, {
            left: -this.index * this.firstLi.offsetWidth
        }, () => {
            // console.log(this);
            if(this.index === 0) {
                this.index = this.ul.children.length - 2
                this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
            }
            // 小圆点
            for(var i=0; i<this.ol.children.length; i++) {
                this.ol.children[i].style.backgroundColor = '#000'
            }
            this.ol.children[this.index-1].style.backgroundColor = 'red'
            this.flag = true
        })
        return false
    }
    // 小圆点点击
    for(let i=0; i<this.ol.children.length; i++) {
        this.ol.children[i].onclick = () => {
            if(!this.flag) return false
            this.flag = false
            this.index = i+1
            animate(this.ul, {
                left: -this.index * this.firstLi.offsetWidth
            }, () => {
                // console.log(this);
                if(this.index === 0) {
                    this.index = this.ul.children.length - 2
                    this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
                }
                // 小圆点
                for(let i=0; i<this.ol.children.length; i++) {
                    this.ol.children[i].style.backgroundColor = '#000'
                }
                this.ol.children[this.index-1].style.backgroundColor = 'red'
                this.flag = true
            })
        }
    }
    // 自动轮播
    this.timer = setInterval(() => {
        this.rightBtn.onclick()
    }, 1000)

    // 移入
    this.container.onmouseover = () => {
        clearInterval(this.timer)
    }
    // 移出
    this.container.onmouseout = () => {
        this.timer = setInterval(() => {
            this.rightBtn.onclick()
        }, 1000)
    }
}
var c = new Carousel()
c.init()